<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>DogJS</title>
    <style type="text/css">*{box-sizing: border-box}.col-6{width:50%;float:left;}</style>
</head>
<body>
<div class="wrapper">
    <div class="page">
        <ul id="list" class="col-6 list">
            sdfsdfsdf
            <br/>
            {{'this.name is ' + firstName + ' ' + lastName}}
            <br/>
            {{'id:' + id}}
            <h5 class="text-1">This is a Test</h5>
            <li class="list-item" dog-for="item,i in list" name>
                <!--  注释  -->
                <p><a class="item-link" href="list/item/{{item.id}}">{{item.text}}>>>></a></p>
                <p>
                    <b>abc</b>
                    <span>First Name:{{firstName}}</span>
                </p>
                <input dog-for="n in [1,2,3]" type="text" dog-model="firstName">
            </li >
            <li class="list-item" dog-each="item in list">
                <!--  注释  -->
                <p><a class="item-link" href="list/item/{{item.id}}">{{item.text}}>>>></a></p>
                <p>
                    <b>def</b>
                    <span>Last Name:{{lastName}}</span>
                </p>
                <input type="text" dog-model="item.id" />
                <Container type="aaa"></Container>
                <img alt="" src="" />
            </li>
            <div dog-show="firstName==='123'">Test Show</div>
            <div dog-if="firstName==123">Test If</div>
            <div dog-else-if="firstName==456">Test If-else</div>
            <div dog-else>Test Else</div>
            potyutyu
        </ul>
    </div>
</div>
<script type="module">
    import Viewer from '../js/viewer.js'
    // 视图挂载元素
    let listViewer = Viewer.$mount('#list', function () {
        // 属性
        this.props = {
            id: 2
        }
        // 状态
        this.state = {
            list: [
                {id: 1, text: 'Tom'},
                {id: 2, text: 'Jim'},
                {id: 3, text: 'Tim'}
            ],
            id: 1,
            name: 'Tom',
            firstName: 'Rid',
            lastName: 'King'
        }
    })
    /*
    let listViewer = new Viewer({
        el: '#list',
        state: {

        }
    })
    */
    console.log(listViewer)

    let MyViewer = Viewer.extend('demo', {
        methods: {
            aa () {
                console.log('method:aaa')
            }
        },
        props: {
            a: function (){},
            b: 1
        },
        events: {
            b: function () {}
        }
    })
    let myViewer = new MyViewer
    console.log(myViewer)

    let SubMyViewer = MyViewer.extend('demo2', {
        methods: {
            aaaa () {
                console.log('method:aaa')
            }
        },
        props: {
            aa: function (){},
            ba: 1
        },
        events: {
            ba: function () {}
        }
    })
    let subMyViewer = new SubMyViewer
    console.log(subMyViewer)
    //myViewer.aa()
</script>
</body>
</html>